An R package created to make the styling and customization of {reactable} tables easier.
The {reactable} package is a fantastic package for building interactive data tables in R. However, if you want to customize and style the table, it requires a bit of lengthy code and an understanding of how functions work. This can be a bit of a deterrent, especially for novice R users.
The {reactablefmtr} package was created to simplify this process so that anyone can create beautiful tables in {reactable} regardless of their level of R expertise.
It was also created to introduce new ways to enhance the styling of {reactable} that were not previously available.
I’ll go over a brief intro on how to get started in this post, but if you want to see additional examples/tutorials, they are outlined extensively on the {reactablefmtr} package site.
The {reactablefmtr} package is available on CRAN and can be installed with:
install.packages("reactablefmtr")
However, if you want to use the latest version of the package which includes many new enhancements, you can download the development version with:
remotes::install_github("kcuilla/reactablefmtr")
For details on what features are currently available in the development version, please see the latest package news.
By default, color_scales() assigns a three-color red-white-blue pattern based on the value of the cells in a column from low to high:
library(reactablefmtr)
data <- iris[10:29, ]
reactable(data,
columns = list(Petal.Length = colDef(style = color_scales(data))))
You can change the color scheme to any number of colors you’d like by specifying the colors in a vector and color_scales() will assign the colors from low to high in the order you provide:
reactable(data,
columns = list(
Petal.Length = colDef(style = color_scales(data,
colors = c("purple", "pink", "white", "darkgreen")))))
Previously in {reactable}, using dark color palettes such as the “magma” color set from {viridis} was troublesome since you couldn’t see the values in the cells with dark backgrounds. Now, with {reactablefmtr}, the colors of the values automatically are changed to white if the colors are dark:
library(viridis)
reactable(data,
columns = list(
Petal.Length = colDef(style = color_scales(data,
colors = viridis::magma(5)))))
By default, data_bars() assigns a horizontal bar to each row relative to it’s value compared to other values in a particular column:
You can change both the color of the data bars and the background:
Just like with color_scales(), you can apply a gradient of colors to your data bars if you assign more than one color in a vector:
data <- MASS::Cars93[1:15, c("Make", "MPG.city", "MPG.highway")]
reactable(data,
pagination = FALSE, # display all rows on one page
defaultSortOrder = "desc", # sort by descending order
defaultSorted = "MPG.city", # sort by MPG.city
defaultColDef = colDef(cell = data_bars(data, c("firebrick1", "gold", "limegreen")
))
)
You can also now format numbers with the scales package the same way that you would format numbers in the color_tiles() example above. The number_fmt option is available for data_bars_gradient() and data_bars_pos_neg() as well.
car_prices <- MASS::Cars93[20:49, c("Make", "Price", "Weight")]
reactable(car_prices,
columns = list(
Price = colDef(align = "center",
cell = data_bars(car_prices,
number_fmt = scales::dollar_format(accuracy = 1))),
Weight = colDef(align = "center",
cell = data_bars(car_prices,
number_fmt = scales::comma))))
If you would like to customize your data_bars() a step further and apply a linear color gradient, you can now use data_bars_gradient():
library(palmerpenguins)
library(dplyr)
data <- sample_n(penguins,50) %>% # sample 50 rows
filter(!is.na(bill_length_mm)) %>% # remove NA's
select(species, island, body_mass_g)
reactable(data,
columns = list(
body_mass_g = colDef(cell = data_bars_gradient(data))))
You can add as many colors as you would like to make the gradient:
reactable(data,
columns = list(
body_mass_g = colDef(cell = data_bars_gradient(data, colors = c("red", "orange", "yellow", "green", "blue", "indigo", "violet")))))
If your column contains negative values but you would like to show data bars for the values, you can use data_bars_pos_neg():
data <- MASS::Cars93[1:15, c("Make", "MPG.city", "MPG.highway")]
data <- data %>%
mutate(Change = round(runif(15, min = -7, max = 5))) %>%
select(Make, Change)
reactable(data,
pagination = FALSE,
columns = list(
Change = colDef(align = "center", # align column header
cell = data_bars_pos_neg(data))))
If your column is displaying percentages rather than whole numbers, you can add the percent symbol by using the percent formatter from the scales package within number_fmt:
You may also apply a color gradient to the data bars by assigning three or more colors:
reactable(data,
pagination = FALSE,
columns = list(
`% Change` = colDef(align = "center",
cell = data_bars_pos_neg(data,
colors = c("#ff3030", "#ffffff", "#1e90ff"),
number_fmt = scales::percent))))
By default, icon_sets() adds a circle icon from Font Awesome to each value and assigns a color from red-orange-green depending on the value in relation to other values within a particular column:
You can use any icon you’d like from the Font Awesome library by assigning the icons from low to high, as well as the color scheme:
Format numbers using formatters from the scales package with number_fmt:
car_prices <- MASS::Cars93[20:49, c("Make", "Price", "Weight")]
reactable(car_prices,
columns = list(
Price = colDef(align = "center",
cell = icon_sets(car_prices,
number_fmt = scales::dollar_format(accuracy = 1))),
Weight = colDef(align = "center",
cell = icon_sets(car_prices,
number_fmt = scales::comma))))
For more examples, please check out the {reactablefmtr} package site!